<template>
  <div>
    <todo-input
    @change-content='changeContent' ref='todoInput'></todo-input>
    <todo-button @add-todo='addTodo'></todo-button>
  </div>
</template>

<script>
import TodoInput from './TodoInput.vue'
import TodoButton from './TodoButton.vue'
  export default {
    name: 'TodoHeader',
    components:{
      TodoInput,
      TodoButton
    },
    data() {
      return {
        content: ''
      }
    },
    methods: {
      changeContent(val){
        this.content = val
      },
      /**
       * 添加todo，向上层传递事件
       */
      addTodo(){
        this.$emit('addTodo',{
          id: new Date().getTime(),
          content: this.content,
          completed: false
        })
        // 清空输入框内容
        this.$refs.todoInput.reset()
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>